<template>
	<view>
	<view class="orderList"  v-for="(item, i) in orderList" :key="i">
		<view class="top">
			<view class="top_status">
				<view class="time">
					<!-- | filter -->
					{{item.create_time | filter}}
				</view>
				<view v-if="!item.order_status" class="">
					待收货
				</view>
				<view v-else class="">
					已提货
				</view>
			</view>
			<view v-for="(goods,i) in item.goods" :key="i" class="goodsList">
				<image :src="goods.goods_small_logo" mode=""></image>
				<view class="word">
					{{goods.goods_name}}
					<view class="num">
						x{{goods.goods_number}}
					</view>
					<view class="price">
						￥{{goods.goods_price}}
					</view>
				</view>
			</view>
			<view class="btns">
				总计：{{item.order_price}}元
				<button v-if="!item.order_status" type="default" @click="certain(item)">确认收货</button>
				<button v-else type="default" @click="deleteOrder(item)">删除订单</button>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
import cloudApi from "@/common/cloundApi.js"
import { mapGetters,mapMutations,mapState } from 'vuex'
export default {
	data() {
		return {
			orderList:[]
		}
	},
	onLoad() {
		this.getOrder()
	},
	methods: {
		// 获取订单
		getOrder(){
			cloudApi.call({
				name:"order",
				data:{
					action:"get",
					username:this.userinfo.nickName
				},
				success:(res)=>{
					this.orderList = res.result;
				}
			})
		},
		async certain(item){
		const [err, succ] = await uni.showModal({
			title: '提示',
			content: '确认已经收货了吗？'
		  }).catch(err => err)
		
		  if (succ && succ.confirm) {
			// 用户确认了的操作
			cloudApi.call({
				name:"order",
				data:{
					action:"update",
					_id:item._id
				},
				success: (res) => {
					this.getOrder()					
				}
			})
		  }
		},
		async deleteOrder(item){
		const [err, succ] = await uni.showModal({
			title: '提示',
			content: '确认删除该订单吗？'
		  }).catch(err => err)
		
		  if (succ && succ.confirm) {
			// 用户确认了的操作
			cloudApi.call({
				name:"order",
				data:{
					action:"delete",
					_id:item._id
				},
				success:()=>{
					this.getOrder()
				}
			})
		  }
		}
		
	},
	filters: {
		filter(val) {
			var mm = val.slice(4, 7);
			var em = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
			if(mm===em[0]){
				mm = 1;
			}else if(mm===em[1]){
				mm = 2;
			}else if(mm===em[2]){
				mm = 3;
			}else if(mm===em[3]){
				mm = 4;
			}else if(mm===em[4]){
				mm = 5;
			}else if(mm===em[5]){
				mm = 6;
			}else if(mm===em[6]){
				mm = 7;
			}else if(mm===em[7]){
				mm = 8;
			}else if(mm===em[8]){
				mm = 9;
			}else if(mm===em[9]){
				mm = 10;
			}else if(mm===em[10]){
				mm = 11;
			}else{
				mm = 12;
			}
			return  val.slice(10,15) +'-'+mm+'-'+val.slice(8,10)+' '+val.slice(15,25);
		}
	},
  computed: {
	  // 将 userinfo 映射到当前页面中
	  ...mapState('m_user', ['userinfo'])
    }
}
</script>

<style lang="scss" scoped>
.orderList{
	background: #ececec;
	.top{
		width: 95%;
		margin: 10px auto;
		background: #fff;
		border-radius: 3px;
		.top_status{
			display: flex;
			justify-content: space-between;
			margin: 0 10px;
			padding: 5px 0;
			border-bottom: 1px solid #ececec;
			.time{
				color: rgba(0,0,0,.6);
				font-size: 12px;
				line-height: 21px;
			}
		}
		.btns{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-left: 10px;
			font-size: 15px;
			button{
				width: 25%;
				font-size: 12px;
				padding: 0;
				margin: 5px;
				border-radius: 15px;
				background: rgba(9,9,9,.1);
			}
		}
	}
	.goodsList{
		display: flex;
		image{
		width: 100px;
		height: 100px;
		margin: 10px;
		border-radius: 4px;
		}
		.word{
			font-size: 15px;
			flex: 1;
			padding: 10px 0;
			font-weight: 300;
			.price{
				font-size: 17px;
				font-weight: 400;
			}
			.num{
				color: #c00000;
				font-weight: 400;
				text-align: right;
				padding-right: 15px;
			}
		}
	}
}
</style>
